window.addEventListener('load', function () {
    // 头部区域

    // 获取所有字体图标
    var iconfonts = document.querySelector('header').querySelectorAll('span')
    // 获取所有二级菜单
    var uls = document.querySelectorAll('.ul')
    // 获取所有二级菜单里面的li
    var lis = document.querySelectorAll('.li')
    // 控制字体图标反转变量
    var flag = true

    // 点击字体图标反转
    for (let i = 0; i < iconfonts.length; i++) {
        iconfonts[i].addEventListener('click', function (e) {
            if (flag) {
                this.style.transform = 'rotate(180deg)'
                // 显示二级菜单
                uls[i].style.display = 'block'
                flag = false
            } else {
                this.style.transform = 'rotate(0deg)'
                // 隐藏二级菜单
                uls[i].style.display = 'none'
                flag = true
            }
            console.log(flag);
        })
    }

    // 点击其他地方 字体图标归位并关闭二级菜单
    window.addEventListener('click', function (e) {
        for (var i = 0; i < iconfonts.length; i++) {
            if (e.target !== iconfonts[i]) {
                iconfonts[i].style.transform = 'rotate(0deg)'
                uls[i].style.display = 'none'
                flag = true
            }
        }

    })


    // 鼠标经过二级菜单里面的li
    for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener('mouseenter', function () {
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = ''
                lis[i].style.color = '#000'
            }
            this.style.backgroundColor = '#B63C3C'
            this.style.color = '#fff'
        })
    }

    // 头部区域下面的轮播
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        autoplay: true,
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            type: 'custom',
            renderCustom: function (swiper, current, total) {
                var str1 = '0' + current
                var str2 = ' / ' + '0' + total
                var _html = `<span class="str1">${str1}</span>` + `<span class="str2">${str2}</span>`
                return _html
            }
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })





    // 旗下企业

    // 获取导航
    var spans = document.querySelectorAll('.enterprise_dh_span')
    // 获取导航上的线条
    var xians = document.querySelectorAll('.enterprise_dh_xian')
    // 获取图片
    var imgs = document.querySelectorAll('.enterprise_bg_img')
    // 获取数字
    var num = document.querySelector('.enterprise_number')
    // 获取项目介绍内容
    var contents = document.querySelectorAll('.enterprise_intro_content')
    // 获取数字导航
    var numbers = document.querySelector('.enterprise_dh_number').querySelectorAll('span')

    // 初始化显示
    xians[0].style.opacity = '1'
    imgs[0].style.opacity = '1'
    contents[0].style.opacity = '1'
    numbers[0].style.backgroundColor = '#1F3970'
    numbers[0].style.color = '#fff'
    num.innerHTML = '01'

    // 点击文字导航
    for (var i = 0; i < spans.length; i++) {
        // 为导航添加自定义标识
        spans[i].setAttribute('index', i)
        spans[i].addEventListener('click', function () {
            // 清除定时器
            if (timer1 !== null) {
                clearInterval(timer1)
                timer1 = null
            }
            for (var i = 0; i < spans.length; i++) {
                xians[i].style.opacity = '0'
                imgs[i].style.opacity = '0'
                contents[i].style.opacity = '0'
                numbers[i].style.backgroundColor = '#FFFFFF'
                numbers[i].style.color = '#1F3970'
            }
            var index = this.getAttribute('index')
            xians[index].style.opacity = '1'
            imgs[index].style.opacity = '1'
            contents[index].style.opacity = '1'
            numbers[index].style.backgroundColor = '#1F3970'
            numbers[index].style.color = '#fff'
            index++
            num.innerHTML = '0' + index

        })
    }

    // 点击数字导航
    for (var i = 0; i < numbers.length; i++) {
        // 为导航添加自定义标识
        numbers[i].setAttribute('index', i)
        numbers[i].addEventListener('click', function () {
            // 清除定时器
            if (timer1 !== null) {
                clearInterval(timer1)
                timer1 = null
            }
            for (var i = 0; i < numbers.length; i++) {
                xians[i].style.opacity = '0'
                imgs[i].style.opacity = '0'
                contents[i].style.opacity = '0'
                numbers[i].style.backgroundColor = '#FFFFFF'
                numbers[i].style.color = '#1F3970'
            }
            var index = this.getAttribute('index')
            xians[index].style.opacity = '1'
            imgs[index].style.opacity = '1'
            contents[index].style.opacity = '1'
            this.style.backgroundColor = '#1F3970'
            this.style.color = '#fff'
            index++
            num.innerHTML = '0' + index

        })
    }

    // 设置自动播放
    var n = 0
    var m = 1
    var timer1 = setInterval(function () {
        if (n == numbers.length - 1) {
            n = -1
            m = 0
        }
        n++
        m++
        for (var i = 0; i < numbers.length; i++) {
            xians[i].style.opacity = '0'
            imgs[i].style.opacity = '0'
            contents[i].style.opacity = '0'
            numbers[i].style.backgroundColor = '#FFFFFF'
            numbers[i].style.color = '#1F3970'
        }
        xians[n].style.opacity = '1'
        imgs[n].style.opacity = '1'
        contents[n].style.opacity = '1'
        numbers[n].style.backgroundColor = '#1F3970'
        numbers[n].style.color = '#fff'
        num.innerHTML = '0' + m

    }, 2000)





    // 项目展示
    // js动画 上下缓慢移动
    function animate(obj, target, callback) {
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetTop) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            if (obj.offsetTop == target) {
                clearInterval(obj.timer)
                callback && callback()
            }
            obj.style.top = obj.offsetTop + step + 'px'
        }, 15)
    }

    // 获取导航列表
    var list = document.querySelector('.project_left_content')
    // 获取导航列表全部元素
    var lists = document.querySelectorAll('.span1')
    // 获取标题
    var titles = document.querySelector('.project_left_content').querySelectorAll('.title')
    // 获取圆圈
    var images = document.querySelector('.project_left_content').querySelectorAll('.project_left_content_intro_img')
    // 获取项目
    var xm = document.querySelectorAll('.project_right')

    // 初始化显示
    lists[0].style.backgroundColor = '#115E90'
    titles[0].style.color = '#FFFFFF'
    images[0].src = './images/button.png'
    xm[0].style.opacity = '1'

    // 点击导航列表
    for (var i = 0; i < lists.length; i++) {
        lists[i].setAttribute('index', i)
        lists[i].addEventListener('click', function () {
            for (var i = 0; i < lists.length; i++) {
                lists[i].style.backgroundColor = '#F7F9FF'
                images[i].src = './images/button2.png'
                titles[i].style.color = '#23252C'
                xm[i].style.opacity = '0'

            }
            var index = this.getAttribute('index')
            animate(list, -index * lists[0].offsetHeight)
            this.style.backgroundColor = '#115E90'
            images[index].src = './images/button.png'
            titles[index].style.color = '#FFFFFF'
            xm[index].style.opacity = '1'

        })
    }
})